<script setup>

import { reactive, ref, watch,watchEffect } from 'vue'
let first = ref('');
let last = reactive({ name: '' });
let full = ref('');
// //监听ref
// watch(first, () => {
//     full.value = first.value + last.name;
// })
// //监听reactive
// watch(() => last.name, () => {
//     full.value = first.value + last.name;
// })
// //
// watch(() => last, () => {
//     full.value = first.value + last.name;
// }, { deep: true });
watchEffect(() => {
    full.value = first.value + last.name;
});

</script>


<template>

    <div>
        全名:{{ full }} <br>
        姓氏:<input type="text" v-model="first"> <br>
        名字:<input type="text" v-model="last.name"> <br>
    </div>
</template>


<style scoped></style>